<template>
  <div>
    <div>共{{this.courses.length}}个课程</div>
    <div v-if="this.coursestarts.length>0"><h1 style="font-size: 20px;margin-top: 20px">即将开始</h1></div>
    <start></start>

    <div v-if="this.courseings.length>0"><h1 style="font-size: 20px">进行中</h1></div>

    <ing></ing>

    <div v-if="this.courseends.length>0"><h1 style="font-size: 20px">已结束</h1></div>

    <end></end>
    <div v-if="this.courses.length===0"
         style="font-size: 25px;margin-left: 200px;margin-top: 100px ">您还没有课程哦，请前往
      <a @click="addCourse()" style="color: burlywood">添加课程</a>
      吧！</div>
  </div>
</template>

<script>
import end from './studentcoursecourseend.vue'
import start from './studentcoursecoursestart.vue'
import ing from './studentcoursecourseing.vue'
import router from '../../router';

export default {

  data() {
    return {
      courses:[],
      coursestarts:[],
      courseings:[],
      courseends:[],
    }
  },
  components:{
    'end':end,
    'start':start,
    'ing':ing
  },
  created() {
    //发送请求获取数据
    this.axios.get(this.baseUrl+"course/findcoursebyuid")
      .then(res=>{
        console.log(res.data);
        //
        this.courses = res.data.data;
        for (let i = 0; i < this.courses.length; i++) {
          if(Date.parse(this.courses[i].start)>new Date()){
            this.coursestarts.push(this.courses[i])
          }else if(Date.parse(this.courses[i].end)<new Date()){
            this.courseends.push(this.courses[i])
          }else {
            this.courseings.push(this.courses[i])
          }
        }
        this.$store.commit('setCourses',this.courses)
        this.$store.commit('setCoursestarts',this.coursestarts);
        this.$store.commit('setCourseings',this.courseings);
        this.$store.commit('setCourseends',this.courseends);
      })
  },
  methods:{
    addCourse(){

      router.push("/course");
    }
  }
}
</script>

<style scoped>
  @import "../../assets/css/course.css";
  @import "../../assets/css/student.css";

</style>
